import {Image, StyleSheet, View, Text, TouchableOpacity, Alert} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import avator from "@/assets/images/me/avator.png"
import {useConversationStore} from "@/hooks/im/conversation";
import { getIMUserID } from "@/utils/storage"
import {useUserStore} from "@/hooks/im/user";
import OpenIMSDKRN from "open-im-sdk-rn";
import {v4 as uuidv4} from "uuid";
import {useEffect} from "react";
import {useSelector} from "react-redux";
import {RootState} from "@/store";

export default function Index() {

    const router = useRouter();
    const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo);
    const currentMemberInGroup = useConversationStore((state) => state.currentMemberInGroup);
    const currentGroupList = useConversationStore((state) => state.currentGroupList);
    const selfInfo = useUserStore((state) => state.selfInfo)
    const postDsimissGroup = useConversationStore(state => state.postDsimissGroup);
    const postOutGroup = useConversationStore(state => state.postOutGroup);
    const login = useSelector((state: RootState) => state.login);


    useEffect(() => {
        console.log('currentGroupInfo', currentGroupInfo);
        console.log('currentGroupList', currentGroupList);
        console.log('selfInfo', selfInfo);
    }, [])

    const goGroupList = function () {
        router.push("/groupSetting/groupList")
    };

    const goRemoveGroupMan = function () {
        router.push("/groupSetting/removeGroupMan")
    };

    const goSetGroupAdmin = function () {
        router.push("/groupSetting/setGroupAdmin")
    };

    const goGroupNotice = function () {
        console.log('getIMUserID', selfInfo);
        if (currentGroupInfo?.ownerUserID !== login?.userInfo?.uid) return;
        router.push("/groupSetting/groupNotice")
    };

    const dismissGroup = function () {

        Alert.alert(
            '解散群组',
            '确认解散该群组吗？',
            [
                {
                    text: '取消',
                    style: 'cancel',
                },
                {
                    text: '确定',
                    onPress: () => {
                        postDsimissGroup();
                    },
                },
            ],
            { cancelable: false }
        );


    };

    const outGroup = function () {
        Alert.alert(
            '退出群组',
            '确认退出该群聊吗？',
            [
                {
                    text: '取消',
                    style: 'cancel',
                },
                {
                    text: '确定',
                    onPress: () => {
                        postOutGroup();
                    },
                },
            ],
            { cancelable: false }
        );
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }} key="groupIndex">
            <Stack.Screen
                options={{
                    title: '群聊设置', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
           <View style={{ paddingHorizontal: 12, }}>
              <View style={styles.groupHeader}>
                  <View style={ styles.groupAvator }>
                      <Image source={{ uri: currentGroupInfo?.faceURL }} style={{ width: "100%", height: "100%" }} />
                  </View>
                  <Text style={styles.groupName}>{ currentGroupInfo?.groupName }</Text>
              </View>
              <View style={styles.groupBodyContainer}>
                 <View style={styles.groupListHeader}>
                     <View>
                         <View>
                             <Text>群聊成员</Text>
                         </View>
                     </View>
                     <TouchableOpacity onPress={goGroupList} style={styles.lookGroupList}>
                         <Text style={styles.lookGroupTitle}>查看群成员</Text>
                         <AntDesign name="right" size={12} color="#9C9EAC" />
                     </TouchableOpacity>
                 </View>
                  <View style={{ flexDirection: "row", marginTop: 10, }}>
                      <View style={styles.groupList}>
                          {
                              currentGroupList?.map((item, index) => {
                                  if (index < 4) {
                                      return (
                                          <View style={styles.groupListItem}>
                                              <View style={{ width: 46, height: 46, margin: "auto" }}>
                                                  <Image source={{ uri: item?.faceURL }} style={{ width: "100%", height: "100%" }} />
                                              </View>
                                              <View style={styles.groupListItemName}>
                                                  <Text style={styles.groupListItemNameText}>{ item?.nickname }</Text>
                                              </View>
                                          </View>
                                      )
                                  };
                              })
                          }
                      </View>
                      {
                          currentGroupInfo?.ownerUserID === login?.userInfo?.uid && (
                              <TouchableOpacity onPress={goRemoveGroupMan}>
                                  <View style={styles.increateGroupList}>
                                      <View style={[styles.increateIcon, { transform: [{ rotate: '90deg' }] }]}></View>
                                  </View>
                              </TouchableOpacity>
                          )
                      }

                  </View>
              </View>
              <TouchableOpacity onPress={goGroupNotice}>
                  <View style={styles.groupTip}>
                      <View style={styles.groupTipLeft}>
                          <View>
                              <Text style={styles.groupTipLeftTitleTip}>
                                  群公告
                              </Text>
                          </View>
                          <View style={styles.groupTipLeftBodyContent}>
                              {
                                  currentGroupInfo && currentGroupInfo.notification && (
                                      <Text style={styles.groupTipLeftBodyContentText}>
                                          {
                                              currentGroupInfo && currentGroupInfo.notification
                                          }
                                      </Text>
                                  )
                              }

                              {
                                  currentGroupInfo && !currentGroupInfo.notification && (
                                      <Text style={styles.groupTipLeftBodyContentText}>
                                          还没有群公告哦~
                                      </Text>
                                  )
                              }
                          </View>
                      </View>
                      <View style={styles.groupTipRight}>
                          <AntDesign name="right" size={12} color="#9C9EAC" />
                      </View>
                  </View>
              </TouchableOpacity>
               {
                   currentGroupInfo?.ownerUserID === login?.userInfo?.uid && (
                       <TouchableOpacity onPress={goSetGroupAdmin}>
                           <View style={styles.groupAdminSettingWrap}>
                               <View style={{ flex:1 }}>
                                   <Text>管理员设置</Text>
                               </View>
                               <View style={styles.groupTipRight}>
                                   <AntDesign name="right" size={12} color="#9C9EAC" />
                               </View>
                           </View>
                       </TouchableOpacity>
                   )
               }

               {
                   currentGroupInfo?.ownerUserID === login?.userInfo?.uid && (
                       <TouchableOpacity onPress={dismissGroup}>
                           <View style={styles.outGroup}>
                               <Text style={styles.outGroupText}>解散群聊</Text>
                           </View>
                       </TouchableOpacity>
                   )
               }

               {
                   currentGroupInfo?.ownerUserID !== login?.userInfo?.uid && (
                       <TouchableOpacity onPress={outGroup}>
                           <View style={styles.outGroup}>
                               <Text style={styles.outGroupText}>退出群聊</Text>
                           </View>
                       </TouchableOpacity>
                   )
               }
           </View>
        </View>

    );
}

const styles = StyleSheet.create({
    groupHeader: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 12,
        paddingHorizontal: 8,
        backgroundColor: "#fff",
        borderRadius: 8,
    },
    groupAvator: {
        width: 48,
        height: 48,
        borderRadius: 50,
        overflow: "hidden",
    },
    groupName: {
        marginLeft: 10,
        color: "#2A2B30"
    },
    groupListHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    groupBodyContainer: {
        marginTop: 12,
        backgroundColor: "#fff",
        borderRadius: 10,
        paddingHorizontal: 12,
        paddingVertical: 14,
    },
    lookGroupList: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    lookGroupTitle: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    groupList: {
        flexDirection: "row",
        flex: 1,
        // justifyContent: "space-between",
    },
    groupListItem: {
        width: 46,
        marginRight: 28,
    },
    increateGroupList: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        width: 46,
        borderRadius: 50,
        height: 46,
        marginLeft: 24,
        backgroundColor: "#F3F5F4",
    },
    increateIcon: {
        width: 2,
        height: 16,
        backgroundColor: "#C0C3CE",
        borderRadius: 10,
    },
    groupListItemName: {
        marginTop: 8,
    },
    groupListItemNameText: {
        fontSize: 10,
        textAlign: "center"
    },
    groupTip: {
        marginTop: 12,
        backgroundColor: "#fff",
        borderRadius: 10,
        paddingHorizontal: 12,
        paddingVertical: 14,
        flexDirection: "row",
        alignItems: "center",
    },
    groupTipLeft: {
        flex: 1
    },
    groupTipLeftTitleTip: {
        color: "#2A2B30",
        fontWeight: "bold",
        fontSize: 14,
    },
    groupTipLeftBodyContent: {
        marginTop: 12,
    },
    groupTipLeftBodyContentText: {
        fontSize: 12,
        color: "#9C9EAC",
    },
    groupTipRight: {

    },
    groupAdminSettingWrap: {
        marginTop: 12,
        backgroundColor: "#fff",
        borderRadius: 10,
        paddingHorizontal: 12,
        paddingVertical: 14,
        flexDirection: "row",
        alignItems: "center",
    },
    outGroup: {
        marginTop: 10,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        height: 44,
        backgroundColor: "#fff",
        borderRadius: 10,
    },
    outGroupText: {
        fontSize: 14,
        color: "#FB4B34"
    },
});
